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Introduction 


Team Fortress 2 

Distinctive Silhouettes 
Stylized shading 

Left 4 Dead 

Creating a Dark, Gritty Horror experience 
Applying lessons learned fromTF2 
Utilizing "Filmic" effects 
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Initial Team Fortress 2 









Why The Unique Visual Style? 
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Gameplay 

Readability 

Branding 
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Read Hierarchy 

Team - Friend or Foe? H 

Color 

Class - Run or Attack? 

D st i net i ve si I houettes H 

Body proportions 

Weapons Color Swatch 

Shoes, hats and clothing folds 

Selected weapon - What's he packin'? 

Highest contrast at chest level, where weapon is held 
Gradient from dark feet to light chest 








Norman Rockwell 










J .C. Leyendecker 
Thanksgi vi ng 1628-1928 


J .C. Leyendecker 
Tally-Ho, 1930 



















J. C. Leyendecker 
Arrow collar advertisement, 1929 



J .C. Leyendecker 
Swimmin' Hole, 1935 















Before Rim Highlighting 

Early Production Still 
from Meet the Heavy 
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2D Rim Highlighting Paintover 


Early Production Still 
from Meet the Heavy 
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Character Creation 


1. Character si I houette 

2. Interior shapes 

3. Model sheet 

4. 3D Model 

5. Character Ski n 

6. Fi nal Character i n game 
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Character Si I houette 


Building block of 
character design 

Identifiable at first read 
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Interior Shapes 

Sol vi ng i nteri or 
character design with 
shadow shapes 

Keep it iconic 

Work out desi gn i n 
three quarter pose 
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Model Sheet 

Use concept painting 
as guide 

Solve design 
probl ems usi ng 
silhouette only 

Sol ve i nteri or desi gn 
with shadow shapes 
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3D Model 


Match si I houette to 
model sheet 

Solve 3 quarter 
design with 
screenshots / 
pai ntovers 

Model with character 
in mind 
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Base Ambient Occlusion map 











Character Ski n 





















Final Character 

3D model with 
texture and basic 
shading 
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Engi neer 
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Engineer model 
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Pyro Concept 
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Pyro model 
















Environment Design 


Creating a compelling, 
i mmersi ve worI d 

Team distinction through 
material 

hue/ val ue/ saturation. 

Impressionistic painterly 
look 
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Contrasting Team Properties 

Red 

Warm colors 
Natural materials 
Angular geometry 



Bl ue 

Cool colors 
Industrial materials 
Orthogonal forms 





































World texturing 




World texturing 



























World texturing 



valve 











World texturing 
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Model texturing 
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Introduction 

Co-op, first-person horror game 
Dynamic shared narrative 

Experience a scary action movie with your 
friends 

Al Di rector 

Procedural I y generated character 
performance, pacing, effects and music 

Available this Fall 





Art Di recti on and Gameplay 

Creating a dark, scary cinematic 
envi ronment 

Appl i ng I essons I earned from TF2 

Utilizing "Filmic" Effects 

Incorporating shaders that enhance 
a dark setting 
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Filmic effects 

Color Correction 
Grain 
Vi gnette 

' Local Contrast Enhancement 

Dynamically communicate game state 
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Vignette 
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Local Contrast 
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Filmic, Effects 














Hunter Pounce 
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Lighting for Darkness 

Horror/ suspense theme 

Lighting that supports fiction/ navigation 

I mportance of Si I houette 

Player as light source 
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In-game headlights 
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Smoking the Set 

Separate foreground from background 

* Fog 

Light colored fog in dark areas to contrast with 
si I houettes of infected in mid-ground 

Particles 

Adds atmosphere and helps accentuate silhouettes 
of infected against lighter particles 
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Black Fog 


Light Fog 






Without particles 


With particles 
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Reload, Shove & Muzzle Flash 

Player is the light source 
Increases drama and immersion 
Flashlight is attached to the weapons 

Reloading 
Shovi ng 
Muzzle flash 

Encourages players to coordinate actions 
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Self Shadowed Normal Mapping 


Normal mapping locally 
alters surface 
orientation, causing 
detailed lighting 
effects 




SSNM i ncorporates I ocal 
self-shadowi ng 
information for greater 
surface richness 

Reacts to lighting from 
radiosity as wel I as 
dynamic lights in the 
scene, such as the 
pi ayer' s f I ashl i ght 

Refactori ng our shader 
code, this turns out to 
be free 
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Narrow dark area 
from normal facing 
away from the light 



Light 

Intensity 


Self-Shadowed 

Region 







Wetness/ Puddles 

Film technique 

Adds details to dark settings 

Enhances moodi ness 
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Wet Surfaces in Engine 


Summary 


Team Fortress 2 

Distinctive Silhouettes 
Stylized shading 

Left 4 Dead 

Creating a Dark, Gritty Horror experience 
Applying lessons learned fromTF2 
Utilizing "Filmic" effects 
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